<template>
  <view class="deduct-cell bg-white radius-16 py-22" :class="[customClass]">
    <view class="font-32 font-bold pb-18 mb-12 px-24">优惠抵扣</view>
    <slot name="header"></slot>
    <view v-if="hasCoupon" class="flex pt-18 pb-18 items-center px-24">
      <view class="font-26 text-333">优惠券</view>
      <view class="ml-auto flex items-center flex-1 justify-end" @click="toUse('coupon')">
        <view v-if="couponTotal == 0" class="font-26 text-999">无可用</view>
        <text v-else-if="couponDisable" class="font-26 text-999">不可与卡共用</text>
        <view v-else-if="checkCouponNum" class="font-26 desc">{{ couponDicount }}</view>
        <view v-else class="text-white px-16 pb-4 pt-4 radius-10 count-bg"> 共{{ couponTotal }}张 </view>
        <zm-icon name="arrow" size="28rpx" weight="bold" color="#999" custom-class="ml-10"></zm-icon>
      </view>
    </view>
    <view v-if="hasCard" class="pt-18 pb-18 flex items-center px-24">
      <view class="font-26 text-333">{{ cardName }}</view>
      <view class="ml-auto flex items-center flex-1 justify-end" @click="toUse('card')">
        <view v-if="cardCanUseNum == 0" class="font-26 text-999">无可用</view>
        <text v-else-if="cardDisable" class="font-26 text-999">不可与券共用</text>
        <view v-else-if="checkCardNum" class="font-26 desc">-￥{{ cardDicount }}</view>
        <view v-else class="p16 pb-4 pt-4 desc"> 共{{ cardCanUseNum }}张 </view>
        <zm-icon name="arrow" size="28rpx" weight="bold" color="#999" custom-class="ml-10"></zm-icon>
      </view>
    </view>
    <view v-if="hasVipFirstDiscount" class="pt-18 pb-18 flex items-center px-24">
      <view class="font-26 text-333 flex items-center" @click="handleQuestion('firstDiscount')">
        <text class="mr-10">会员每月首单立减</text>
        <zm-icon name="question-o" color="#999999" size="28rpx"></zm-icon>
      </view>
      <view class="ml-auto flex items-center flex-1 justify-end" @click="toUse('vip')">
        <view v-if="useVipFirstDiscount" class="font-26 desc">-￥{{ vipDiscount }}</view>
        <view v-else class="font-26 desc">未使用</view>
        <zm-icon name="arrow" size="28rpx" weight="bold" color="#999" custom-class="ml-10"></zm-icon>
      </view>
    </view>
    <!-- 其他折扣 -->
    <view v-for="(item, index) in otherDiscount" :key="index" class="pt-18 pb-18 flex items-center px-24">
      <view class="font-26 text-333">{{ item.key }}</view>
      <view class="ml-auto flex items-center flex-1 justify-end">
        <view class="pr-10 pb-4 pt-4 desc">{{ item.name }}</view>
      </view>
    </view>
    <!-- 超出折扣提示 -->
    <!-- <view v-if="discountAbove" class="tip-cell">
      <zm-icon name="info-o" color="#FD7441" size="28rpx"></zm-icon>
      <text class="ml-12">优惠扣减高于影票实际金额，请确认</text>
    </view> -->
  </view>
</template>

<script>
import weixin from "@/mixins/weixin.js"
import { mapGetters } from "vuex"
export default {
  name: "deduct-cell",
  mixins: [weixin],
  props: {
    couponCount: {
      type: Object,
      default: () => {
        return {
          saleCoupon: "0", // 卖品券数量
          filmCoupon: "0", //	电影券数量
          cardCoupon: "0" // 电影卡数量
        }
      }
    },
    cardCanUseNum: {
      type: [String, Number],
      default: ""
    },
    orderInfo: {
      type: Object,
      default: () => {}
    },
    hasCoupon: {
      type: Boolean,
      default: false
    },
    hasCard: {
      type: Boolean,
      default: false
    },
    payType: {
      type: String,
      default: ""
    },
    // 其他优惠只做显示
    discountList: {
      type: [Array, null],
      default: () => {
        return []
      }
    },
    checkCardNum: {
      type: [String, Number],
      default: 0
    },
    checkCouponNum: {
      type: [String, Number],
      default: 0
    },
    preInfo: {
      type: Object,
      default: () => {
        return {}
      }
    },
    customClass: {
      type: String,
      default: ""
    }
  },

  data() {
    return {}
  },
  computed: {
    ...mapGetters(["couponCardMergeUse", "checkVip", "cardName"]),
    couponTotal() {
      return this.$u.plus(+this.checkVip?.usableCouponCount || 0, +this.couponCount.filmCoupon)
    },
    couponDisable() {
      // 卡券不可用同时使用且选择了卡（券不可用）
      return !this.couponCardMergeUse && this.checkCardNum > 0
    },
    cardDisable() {
      // 卡券不可同时使用且选择了券（卡不可用）
      return !this.couponCardMergeUse && this.checkCouponNum > 0
    },
    cardDicount() {
      // 卡抵扣的价格
      return this.preInfo.film?.cardInfo?.money
    },
    otherDiscount() {
      // 其他优惠的抵扣数组
      if (this.discountList?.length) {
        return this.discountList.filter((item) => {
          !item.isFirstDiscount
        })
      } else {
        return []
      }
    },
    couponDicount() {
      // 券抵扣信息
      const index = this.preInfo.film?.coupons.findIndex((item) => {
        return item.couponType == 1
      })
      return index >= 0 ? `已选择${this.preInfo.film?.coupons.length}张优惠券 ` : `-￥${this.preInfo.film?.couponsDiscount} `
    },
    hasVipFirstDiscount() {
      /**
       * 1.是会员身份，通过allowUseFirstDiscounts（true） 判断是否可以使用首单立减
       * 2.是会员身份，并且勾选首单立减，通过allowUseFirstDiscounts（false） + this.orderInfo.discountType（使用首单立减）
       * 2.不是会员身份，通过this.checkVip.ruleId 判断用户是否勾选了会员卡，勾选了则可以使用首单立减
       */
      return (this.orderInfo.discountType == 1 && !this.orderInfo?.allowUseFirstDiscounts) || this.checkVip.ruleId || this.orderInfo?.allowUseFirstDiscounts
    },
    useVipFirstDiscount() {
      // 是否使用了vip首单立减
      return this.orderInfo?.discountType == 1
    },
    vipDiscount() {
      // 首单立减价格
      return this.orderInfo?.discount || 0
    }
  },
  mounted() {},
  methods: {
    toUse(type) {
      this.$emit("choose-cell", type)
    },
    handleQuestion(type) {
      this.$emit("question", type)
    }
  }
}
</script>
<style lang="scss" scoped>
.count-bg {
  background: linear-gradient(90deg, #fe7f58, #fe3b3b);
}
.desc {
  color: #fd7441;
}
.tip-cell {
  padding: 15rpx 24rpx;
  background: #fff1eb;
  border-radius: 10rpx;
  font-size: 22rpx;
  color: #fd7441;
  display: flex;
  align-items: center;
  margin: 0 24rpx;
}
</style>
